import React, { Component } from 'react'
import TabBar from '../common/TabBar';
import Header from '../common/Header';
import {connect} from 'react-redux';
class Order extends Component {
    render() {
        return (
            <div className='order'>
                 {/* 头部组件 */}
                 <Header title={<h4>订单详情</h4>} right={<div><span className='iconfont icon-sangedian'></span>|<span className='iconfont icon-cha'></span></div>}></Header>
                 <div className="ordlist">
                     {this.props.list.map((item)=>{
                         return (
                             <div className="div" key={item.id}>
                                 <p>{item.name}</p>
                                 <p>{item.money}</p>
                                 <p>X{item.count}</p>
                             </div>
                         )
                     })}
                     <p>总计：<span className='num'>￥{this.props.list.reduce((total,item)=>{
                                return total+item.count*item.money;
                                },0)}元</span></p>
                 </div>
    
                {/* 底部公共路由 */}
                <TabBar></TabBar>
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {
            list:state.catList
        }
    },
    (dispatch)=>{
        return {

        }
    }
)(Order)
